(function () {

    // 获取 wangEditor 构造函数和 jquery
    var E = window.wangEditor;
    var $ = window.jQuery;


/***************************指定段落行高****************************/
 E.createMenu(function (check) {

        // 定义菜单id，不要和其他菜单id重复。编辑器自带的所有菜单id，可通过『参数配置-自定义菜单』一节查看
        var menuId = 'clineheight';

        // check将检查菜单配置（『参数配置-自定义菜单』一节描述）中是否该菜单id，如果没有，则忽略下面的代码。
        if (!check(menuId)) {
            return;
        }

        // this 指向 editor 对象自身
        var editor = this;

        // 由于浏览器自身不支持 lineHeight 命令，因此要做一个hook
        editor.commandHooks.lineHeight = function (value) {
           var rangeElem = editor.getRangeElem();
           var targetElem = editor.getSelfOrParentByName(rangeElem, 'p,h1,h2,h3,h4,h5,pre,a');

            if (!targetElem) {
                return;
            }

          $(targetElem).css('line-height', value + '');


        };

        // 创建 menu 对象
        var menu = new E.Menu({
            editor: editor,  // 编辑器对象
            id: menuId,  // 菜单id
            title: '段落行高', // 菜单标题
            commandName: 'lineHeight', // 命令名称

            // 正常状态和选中装下的dom对象，样式需要自定义
            $domNormal: $('<a href="#" tabindex="-1"><i class="icon-p-lineheight"></i></a>'),
            $domSelected: $('<a href="#" tabindex="-1" class="selected"><i class="icon-p-lineheight"></i></a>')
        });



        // 数据源
        var data  = {
            // 格式： 'value' : 'title'

            '1.0': '1.0倍',
            '1.5': '1.5倍',
            '1.8': '1.8倍',
            '2.0': '2.0倍',
            '2.5': '2.5倍',
            '3.0': '3.0倍',

        };

        // 为menu创建droplist对象
        var tpl = '<span style="line-height:{#commandValue}">{#title}</span>';
        menu.dropList = new E.DropList(editor, menu, {
            data: data,  // 传入数据源
            tpl: tpl  // 传入模板
        });




        // 增加到editor对象中
        editor.menus[menuId] = menu;
    });



    /***************************全局段落行高****************************/
    E.createMenu(function (check) {

        // 定义菜单id，不要和其他菜单id重复。编辑器自带的所有菜单id，可通过『参数配置-自定义菜单』一节查看
        var menuId = 'glineheight';

        // check将检查菜单配置（『参数配置-自定义菜单』一节描述）中是否该菜单id，如果没有，则忽略下面的代码。
        if (!check(menuId)) {
            return;
        }

        // this 指向 editor 对象自身
        var editor = this;

        // 由于浏览器自身不支持 lineHeight 命令，因此要做一个hook
        editor.commandHooks.glineHeight = function (value) {
            var rangeElem = editor.getRangeElem();
            var targetElem = editor.getSelfOrParentByName(rangeElem, 'p,h1,h2,h3,h4,h5,pre,a');

            if (!targetElem) {
                return;
            }

            var $allTargetElem = $(targetElem).siblings();
            var elemNumber = $allTargetElem .length

            for (var i=0; i<elemNumber; i++) {
                //   $allTargetElem[i].css('line-height', value + '')
                $($allTargetElem[i]).css('line-height', value + '')
            }

            $(targetElem).css('line-height', value + '');


        };

        // 创建 menu 对象
        var menu = new E.Menu({
            editor: editor,  // 编辑器对象
            id: menuId,  // 菜单id
            title: '全局行高', // 菜单标题
            commandName: 'glineHeight', // 命令名称

            // 正常状态和选中装下的dom对象，样式需要自定义
            $domNormal: $('<a href="#" tabindex="-1"><i class="wangeditor-menu-img-arrows-v"></i></a>'),
            $domSelected: $('<a href="#" tabindex="-1" class="selected"><i class="wangeditor-menu-img-arrows-v" style="color:red"></i></a>')
        });


        // 数据源
        var data  = {
            // 格式： 'value' : 'title'

            '1.0': '1.0倍',
            '1.5': '1.5倍',
            '1.8': '1.8倍',
            '2.0': '2.0倍',
            '2.5': '2.5倍',
            '3.0': '3.0倍',

        };

        // 为menu创建droplist对象
        var tpl = '<span style="line-height:{#commandValue}">{#title}</span>';
        menu.dropList = new E.DropList(editor, menu, {
            data: data,  // 传入数据源
            tpl: tpl  // 传入模板
        });


        // 增加到editor对象中
        editor.menus[menuId] = menu;
    });



    /***************************插入符号****************************/
    E.createMenu(function (check) {

        // 定义菜单id，不要和其他菜单id重复。编辑器自带的所有菜单id，可通过『参数配置-自定义菜单』一节查看
        var menuId = 'csymbol';

        // check将检查菜单配置（『参数配置-自定义菜单』一节描述）中是否该菜单id，如果没有，则忽略下面的代码。
        if (!check(menuId)) {
            return;
        }

        // this 指向 editor 对象自身
        var editor = this;

        // 创建 menu 对象
        var menu = new E.Menu({
            editor: editor,  // 编辑器对象
            id: menuId,  // 菜单id
            title: '符号', // 菜单标题

            // 正常状态和选中装下的dom对象，样式需要自定义
            $domNormal: $('<a href="#" tabindex="-1"><i class="wangeditor-menu-img-omega"></i></a>'),
            $domSelected: $('<a href="#" tabindex="-1" class="selected"><i class="wangeditor-menu-img-omega"></i></a>')
        });

        // 要插入的符号（可自行添加）
        var symbols = ['∑', '√', '∫', '∏', '≠', '♂', '♀','$','￥','&','^','%','œ','®','†','ø','π','å','ß','∂','ƒ','©','∆','˚','¬','Ω','≈','ç', 'µ','÷']

        // panel 内容
        var $container = $('<div></div>');
        $.each(symbols, function (k, value) {
            $container.append('<a href="#" style="display:inline-block;margin:5px;">' + value + '</a>');
        });

        // 插入符号的事件
        $container.on('click', 'a', function (e) {
            var $a = $(e.currentTarget);
            var s = $a.text();

            // 执行插入的命令
            editor.command(e, 'insertHtml', s);
        });

        // 添加panel
        menu.dropPanel = new E.DropPanel(editor, menu, {
            $content: $container,
            width: 350
        });

        // 增加到editor对象中
        editor.menus[menuId] = menu;
    });

    /***************************上标****************************/
    E.createMenu(function (check) {

        // 定义菜单id，不要和其他菜单id重复。编辑器自带的所有菜单id，可通过『参数配置-自定义菜单』一节查看
        var menuId = 'sup';

        // check将检查菜单配置（『参数配置-自定义菜单』一节描述）中是否该菜单id，如果没有，则忽略下面的代码。
        if (!check(menuId)) {
            return;
        }

        // this 指向 editor 对象自身
        var editor = this;

        // 创建 menu 对象
        var menu = new E.Menu({
            editor: editor,  // 编辑器对象
            id: menuId,  // 菜单id
            title: '上标', // 菜单标题

            // 正常状态和选中装下的dom对象，样式需要自定义
            $domNormal: $('<a href="#" tabindex="-1">X<sup>2</sup></a>'),
            $domSelected: $('<a href="#" tabindex="-1" class="selected" >X<sup>2</sup></a>')
        });

        // 由于浏览器自身不支持 supScript 命令，因此要做一个hook
        editor.commandHooks.supScript = function (value) {
            var rangeElem = editor.getRangeElem()
            var targetElem = editor.getSelfOrParentByName(rangeElem,'p,h1,h2,h3,h4,h5,pre');
            if (!targetElem) {
                return;
            }
            $(targetElem).append('<sup>232332</sup>');
        };


        menu.clickEvent = function (e) {
            console.log(e)
            if ( !editor.isRangeEmpty() ) {
                editor.command(e, 'supScript');
            }

        };

        menu.clickEventSelected = function (e) {
            // 找到当前选区所在的 sub 元素
            var elem = editor.getRangeElem();
            var sup = editor.getSelfOrParentByName(elem, 'p,h1,h2,h3,h4,h5,pre');
            var $sup;

            if (!sup) {
                // 未找到 sup 元素，则忽略
                return e.preventDefault();
            }
            $sup = $(sup);

            editor.command(e, 'supScript');
        };

        // 根据当前选区，自定义更新菜单的选中状态或者正常状态
        menu.updateSelectedEvent = function () {
            // 获取当前选区所在的父元素
            var elem = editor.getRangeElem();
            var sub = editor.getSelfOrParentByName(elem, 'p,h1,h2,h3,h4,h5,pre');
            var $sub;
            var subText;

            if (!sub) {
                // 未找到 sub 元素，则标记为未处于选中状态
                return false;
            }
            $sub = $(sub);
            subText = $sub.text();

            if (subText==='') {
                // 则标记为未处于选中状态

                return false;
            }

            // 找到 sub 元素，并且 text 不是 null，则标记为选中状态
            return true;
        };

//TODO://完成上标和下标

        // 增加到editor对象中
        editor.menus[menuId] = menu;
    });


    /***************************下标****************************************************************************/
  /*  E.createMenu(function (check) {

        // 定义菜单id，不要和其他菜单id重复。编辑器自带的所有菜单id，可通过『参数配置-自定义菜单』一节查看
        var menuId = 'sub';

        // check将检查菜单配置（『参数配置-自定义菜单』一节描述）中是否该菜单id，如果没有，则忽略下面的代码。
        if (!check(menuId)) {
            return;
        }

        // this 指向 editor 对象自身
        var editor = this;

        // 创建 menu 对象
        var menu = new E.Menu({
            editor: editor,  // 编辑器对象
            id: menuId,  // 菜单id
            title: '下标', // 菜单标题

            // 正常状态和选中装下的dom对象，样式需要自定义
            $domNormal: $('<a href="#" tabindex="-1">X<sub >2</sub></a>'),
            $domSelected: $('<a href="#" tabindex="-1" class="selected">X<sub >2</sub></a>')
        });

        // 由于浏览器自身不支持 supScript 命令，因此要做一个hook
        editor.commandHooks.subScript = function (value) {
            var rangeElem = editor.getRangeElem();
            var targetElem = editor.getSelfOrParentByName(rangeElem,'p,h1,h2,h3,h4,h5,pre');
            if (!targetElem) {
                return;
            }

            $(targetElem).append('<sup>'+value+'</sup>');
            console.log(value)
        };

        // 菜单正常状态下，点击将触发该事件
        menu.clickEvent = function (e) {
            // 找到当前选区所在的 sub 元素
            var elem = editor.getRangeElem();
            var sub= editor.getSelfOrParentByName(elem, 'sub');
            var $sub;

            if (!sub) {
                // 未找到 p 元素，则忽略
                return e.preventDefault();
            }
            $sub = $(sub);

            // 使用自定义命令




            editor.command(e, 'subScript');
        };

        // 菜单选中状态下，点击将触发该事件
        menu.clickEventSelected = function (e) {
            // 找到当前选区所在的 sub 元素
            var elem = editor.getRangeElem();
            var sub = editor.getSelfOrParentByName(elem, 'sub');
            var $sub;

            if (!sub) {
                // 未找到 sub 元素，则忽略
                return e.preventDefault();
            }
            $sub = $(sub);


            editor.command(e, 'subScript');
        };

        // 根据当前选区，自定义更新菜单的选中状态或者正常状态
        menu.updateSelectedEvent = function () {
            // 获取当前选区所在的父元素
            var elem = editor.getRangeElem();
            var sub = editor.getSelfOrParentByName(elem, 'sub');
            var $sub;
            var subText;

            if (!sub) {
                // 未找到 sub 元素，则标记为未处于选中状态
                return false;
            }
            $sub = $(sub);
            subText = $sub.text();

            if (!sub) {
                // 则标记为未处于选中状态

                return false;
            }

            // 找到 sub 元素，并且 text 不是 null，则标记为选中状态
            return true;
        };


        // 增加到editor对象中
        editor.menus[menuId] = menu;
    });*/

    /***************************向右缩进****************************/
    E.createMenu(function (check) {

        // 定义菜单id，不要和其他菜单id重复。编辑器自带的所有菜单id，可通过『参数配置-自定义菜单』一节查看
        var menuId = 'cindent';

        // check将检查菜单配置（『参数配置-自定义菜单』一节描述）中是否该菜单id，如果没有，则忽略下面的代码。
        if (!check(menuId)) {
            return;
        }

        // this 指向 editor 对象自身
        var editor = this;

        // 创建 menu 对象
        var menu = new E.Menu({
            editor: editor,  // 编辑器对象
            id: menuId,  // 菜单id
            title: '右缩进', // 菜单标题

            // 正常状态和选中状态下的dom对象，样式需要自定义
            $domNormal: $('<a href="#" tabindex="-1"><i class="wangeditor-menu-img-indent-right"></i></a>'),
            $domSelected: $('<a href="#" tabindex="-1" class="selected"><i class="wangeditor-menu-img-indent-right"></i></a>')
        });

        // 菜单正常状态下，点击将触发该事件
        menu.clickEvent = function (e) {
            // 找到当前选区所在的 p 元素
            var elem = editor.getRangeElem();
            var p = editor.getSelfOrParentByName(elem, 'p');
            var $p;

            if (!p) {
                // 未找到 p 元素，则忽略
                return e.preventDefault();
            }
            $p = $(p);

            // 使用自定义命令，无限向右缩进
            var oriIndent = $p.css('text-indent');
            var afterIndent =  parseInt(getNum(oriIndent))/14+2;
            afterIndent = afterIndent > 0 ? afterIndent+'em' : 0+'em';
            function commandFn() {

                $p.css('text-indent', afterIndent);

            }
            editor.customCommand(e, commandFn);
        };

        // 菜单选中状态下，点击将触发该事件
        menu.clickEventSelected = function (e) {
            // 找到当前选区所在的 p 元素
            var elem = editor.getRangeElem();
            var p = editor.getSelfOrParentByName(elem, 'p');
            var $p;

            if (!p) {
                // 未找到 p 元素，则忽略
                return e.preventDefault();
            }
            $p = $(p);


            // 使用自定义命令，无限向右缩进
            var oriIndent = $p.css('text-indent');
               var afterIndent =  parseInt(getNum(oriIndent))/14+2;
            afterIndent = afterIndent > 0 ? afterIndent +'em': 0+'em';
            function commandFn() {

                $p.css('text-indent', afterIndent );

               }

            editor.customCommand(e, commandFn);
        };

        // 根据当前选区，自定义更新菜单的选中状态或者正常状态
        menu.updateSelectedEvent = function () {
            // 获取当前选区所在的父元素
            var elem = editor.getRangeElem();
            var p = editor.getSelfOrParentByName(elem, 'p');
            var $p;
            var indent;

            if (!p) {
                // 未找到 p 元素，则标记为未处于选中状态
                return false;
            }
            $p = $(p);
            indent = $p.css('text-indent');

            if (!indent || indent === '0px') {
                // 得到的p，text-indent 属性是 0，则标记为未处于选中状态
                return false;
            }

            // 找到 p 元素，并且 text-indent 不是 0，则标记为选中状态
            return true;
        };

        // 增加到editor对象中
        editor.menus[menuId] = menu;
    });



    /***************************向左缩进****************************/
    E.createMenu(function (check) {

        // 定义菜单id，不要和其他菜单id重复。编辑器自带的所有菜单id，可通过『参数配置-自定义菜单』一节查看
        var menuId = 'coutdent';

        // check将检查菜单配置（『参数配置-自定义菜单』一节描述）中是否该菜单id，如果没有，则忽略下面的代码。
        if (!check(menuId)) {
            return;
        }

        // this 指向 editor 对象自身
        var editor = this;

        // 创建 menu 对象
        var menu = new E.Menu({
            editor: editor,  // 编辑器对象
            id: menuId,  // 菜单id
            title: '左缩进', // 菜单标题

            // 正常状态和选中状态下的dom对象，样式需要自定义
            $domNormal: $('<a href="#" tabindex="-1"><i class="wangeditor-menu-img-indent-left"></i></a>'),
            $domSelected: $('<a href="#" tabindex="-1" class="selected"><i class="wangeditor-menu-img-indent-left"></i></a>')
        });

        // 菜单正常状态下，点击将触发该事件
        menu.clickEvent = function (e) {
            // 找到当前选区所在的 p 元素
            var elem = editor.getRangeElem();
            var p = editor.getSelfOrParentByName(elem, 'p');
            var $p;

            if (!p) {
                // 未找到 p 元素，则忽略
                return e.preventDefault();
            }
            $p = $(p);

            // 使用自定义命令
            var oriIndent = $p.css('text-indent');
            var afterIndent =  parseInt(getNum(oriIndent))/14-2;
            afterIndent = afterIndent > 0 ? afterIndent +'em': 0+'em';


            function commandFn() {

                $p.css('text-indent', afterIndent);

            }

            editor.customCommand(e, commandFn);
        };

        // 菜单选中状态下，点击将触发该事件
        menu.clickEventSelected = function (e) {
            // 找到当前选区所在的 p 元素
            var elem = editor.getRangeElem();
            var p = editor.getSelfOrParentByName(elem, 'p');
            var $p;

            if (!p) {
                // 未找到 p 元素，则忽略
                return e.preventDefault();
            }
            $p = $(p);

            // 使用自定义命令
            var oriIndent = $p.css('text-indent');
            var afterIndent =  parseInt(getNum(oriIndent))/14-2;
            afterIndent = afterIndent > 0 ? afterIndent +'em': 0+'em';
            function commandFn() {
                $p.css('text-indent', afterIndent);
            }

            editor.customCommand(e, commandFn);
        };

        // 根据当前选区，自定义更新菜单的选中状态或者正常状态
        menu.updateSelectedEvent = function () {
            // 获取当前选区所在的父元素
            var elem = editor.getRangeElem();
            var p = editor.getSelfOrParentByName(elem, 'p');
            var $p;
            var indent;

            if (!p) {
                // 未找到 p 元素，则标记为未处于选中状态
                return false;
            }
            $p = $(p);
            indent = $p.css('text-indent');

            if (!indent || indent <= '0px') {
                // 得到的p，text-indent 属性是 0，则标记为未处于选中状态
                return false;
            }

            // 找到 p 元素，并且 text-indent 不是 0，则标记为选中状态
            return true;
        };

        // 增加到editor对象中
        editor.menus[menuId] = menu;
    });

/************************从字符串提取数字************************/
function getNum(text){
    var value = text.replace(/[^0-9]/ig,"");
    return value;
}
})();